<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_页面全屏遮罩层</title>
    <style>
    .mask{
        background-color: rgba(0,0,0,.3);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci at consequatur debitis eos impedit ipsa
        labore maxime non nulla odio, officia quae quasi quia, quos, repellat repellendus tempore unde.
    </div>
    <div>Dolor fugit laboriosam maiores nemo odit quos rem repellat tempore. Accusamus alias aliquid asperiores
        consequatur cum dolore doloremque, ducimus excepturi explicabo modi nesciunt nostrum nulla quam quos recusandae
        sit temporibus!
    </div>
    <div>Ab ducimus facere harum itaque iure, odit qui tenetur? Amet animi atque commodi esse, facilis fuga illo iste
        magnam modi natus odit possimus quas quibusdam recusandae temporibus. Beatae neque, possimus?
    </div>
    <div>A corporis culpa deleniti deserunt eos est illo ipsam ipsum laboriosam magni maiores, molestias nam nemo
        nostrum odit officia pariatur quae quasi rerum sunt suscipit, temporibus ullam unde veritatis voluptatem.
    </div>
    <div>Accusantium adipisci aperiam autem consequuntur delectus dolorem, eaque facere, illo impedit labore magni nobis
        perspiciatis quae quasi quod saepe ut veniam, voluptates? Aut magni quasi rerum. Debitis deserunt dignissimos
        ullam!
    </div>
    <div>Accusantium atque dolor dolorem expedita magnam nemo, quod sed temporibus ullam veritatis. Ab alias asperiores
        consectetur deleniti dignissimos eaque eligendi magni, nostrum perspiciatis quaerat qui, sed velit veniam
        voluptate voluptatibus?
    </div>
    <div>Eius iste quidem rerum veniam? Ab, accusamus, autem consectetur cum, dignissimos enim facere fuga harum in
        incidunt ipsum laudantium minima necessitatibus ratione recusandae rerum sapiente sed sint sit sunt ut.
    </div>
    <div>Aspernatur dolor dolore esse iusto magnam, nihil sint? Accusantium consequatur delectus deleniti ea, eos est,
        et fuga ipsa ipsam ipsum laudantium minus numquam placeat quas qui sapiente sint sit unde?
    </div>
    <div>Ad assumenda, consequatur consequuntur distinctio ex laborum minima necessitatibus odit optio pariatur
        provident quis recusandae, veniam. Cupiditate dolorum, enim ipsum magni quis saepe sint suscipit vel! Obcaecati
        saepe sit voluptatum.
    </div>
    <div>A ab asperiores commodi consequatur distinctio dolorem, dolores eius eligendi facilis ipsum iste iure iusto
        molestiae nihil, nisi non numquam praesentium quae quas quasi quibusdam ratione recusandae rem totam
        voluptatibus.
    </div>
    <div>Amet assumenda doloremque eum fuga fugit illo laborum non obcaecati odio praesentium quam quo repellat saepe
        sit unde, vel voluptate voluptates. Aliquam atque est explicabo maxime non quasi recusandae, vel!
    </div>
    <div>Aspernatur blanditiis cum, impedit libero placeat quasi tempore temporibus. Accusantium architecto autem beatae
        delectus distinctio doloribus ea enim et ipsam, nesciunt quas rerum saepe sapiente suscipit voluptatem! Iste
        quo, repellendus?
    </div>
    <div>Ad aliquid at earum, enim error ipsa laborum, maiores maxime ratione recusandae repellat repudiandae rerum
        soluta totam vel veritatis, voluptatum! Alias, excepturi expedita ipsa iusto molestias nesciunt nulla soluta
        voluptatem.
    </div>
    <div>Ad aut debitis, distinctio eos, ex fugiat iusto, modi molestias natus nostrum obcaecati placeat quisquam quo
        sapiente suscipit unde veritatis. A alias aliquam beatae doloribus labore officiis possimus sint voluptatem.
    </div>
    <div>Aspernatur commodi cupiditate, dolorum eius exercitationem illo incidunt ipsa iusto libero minima omnis
        perferendis quasi tempora veritatis vero! Beatae cumque deleniti, eius excepturi in ipsum nam porro quasi soluta
        vero!
    </div>
    <div>Ab eaque itaque laudantium pariatur temporibus. Excepturi laudantium natus sequi. Consectetur consequuntur,
        cupiditate dolor dolore doloremque earum ex facilis ipsam ipsum itaque laboriosam laborum necessitatibus odio
        pariatur quasi quibusdam reiciendis!
    </div>
    <div>Ab accusantium aliquid aperiam atque blanditiis consequuntur culpa cumque delectus dolores ea fugiat, hic illum
        iure magni, maxime molestiae nihil nisi nobis placeat quia quos sint unde velit voluptate voluptatem.
    </div>
    <div>Accusantium alias aliquam at aut consequatur consequuntur, corporis delectus ducimus ex facere impedit itaque
        maxime molestiae molestias mollitia nesciunt nihil porro quaerat quisquam sed sunt tenetur vel veniam vero
        voluptatibus.
    </div>
    <div>Atque doloribus, eaque. Accusamus adipisci aperiam cupiditate dignissimos excepturi explicabo iure magnam, nam
        necessitatibus omnis quis repellat temporibus, vel. A commodi hic in officia perspiciatis quas quia saepe soluta
        voluptatem!
    </div>
    <div>Aliquid architecto blanditiis culpa cumque deserunt eaque eius eum facere fuga fugit illo inventore, iure
        mollitia nam nulla omnis, perspiciatis provident quasi quibusdam quod quos sapiente, sit vitae voluptas
        voluptatibus.
    </div>
    <div>Accusantium alias dolore nobis, obcaecati quidem similique sint! Beatae dicta eaque itaque laborum magnam
        maiores molestiae, nam natus neque officia perspiciatis, placeat quam quia quibusdam rerum ut veniam?
        Accusantium, libero?
    </div>
    <div>Atque beatae blanditiis, consectetur exercitationem explicabo fuga hic libero nesciunt possimus repudiandae
        tempore temporibus tenetur ullam, veritatis voluptatem! Aliquam at beatae consectetur earum ex libero magnam
        molestiae odit officia quas.
    </div>
    <div>Aliquid amet animi beatae cupiditate deserunt doloribus, earum exercitationem illo itaque laborum maxime, nihil
        nobis quod, repellendus voluptatum. A amet, deserunt dolorum earum minus modi nemo odit quod sapiente sequi.
    </div>
    <div>Accusantium, ad alias architecto beatae corporis dolorem ex libero natus officia omnis perferendis quas quasi
        rem repellat repudiandae, temporibus unde? Cum dicta eaque facere iure iusto pariatur, similique totam
        voluptatem!
    </div>
    <div>Architecto consequatur dolore facere fuga laborum praesentium totam. Ad adipisci aliquam assumenda, consectetur
        culpa ea earum eius expedita modi molestiae, necessitatibus nemo placeat quaerat quam quos reprehenderit sint
        sunt temporibus!
    </div>
    <div>Adipisci aliquam asperiores atque consectetur debitis eligendi esse est excepturi expedita facere, illo impedit
        ipsum iure laborum libero minus optio perferendis placeat possimus quos repudiandae sed sit unde veniam
        veritatis!
    </div>
    <div>Dolore dolores officia vel. Debitis delectus deleniti deserunt dolore eius eligendi est, hic nihil, obcaecati,
        repellat sed sequi veniam voluptatem? Assumenda deleniti dolore dolores fuga harum laudantium nisi, placeat
        quisquam?
    </div>
    <div>Accusamus consequuntur minima praesentium repudiandae saepe similique unde, voluptatibus. Ab aspernatur
        consequatur dolores expedita laudantium magnam mollitia natus neque non nulla optio perferendis, recusandae
        repellendus sed sequi, sunt tenetur voluptate!
    </div>
    <div>Accusamus aliquam at atque commodi corporis debitis doloremque enim explicabo facere fugiat incidunt ipsa iste
        magni minus modi nobis nulla numquam rem repellendus saepe totam ullam vel, veritatis voluptatibus voluptatum.
    </div>
    <div>Consequatur doloremque esse excepturi facilis molestias quis, quos repellat repudiandae saepe tenetur. Ad
        consequuntur quidem quisquam? Cupiditate eligendi eveniet impedit ipsa maiores placeat quaerat quasi quia
        quidem, totam, vero vitae.
    </div>
    <div>Accusamus asperiores autem dolorum impedit, laudantium libero maxime non sunt tenetur voluptatibus! Animi,
        architecto asperiores autem cumque debitis deleniti error ex itaque laboriosam numquam omnis provident quaerat
        quas sint tempora?
    </div>
    <div>Deserunt dignissimos eveniet hic id ipsa laborum magnam mollitia neque nulla officiis provident qui quia quod
        similique soluta temporibus tenetur, totam voluptatum. Aperiam deleniti dignissimos dolor esse in rem vitae!
    </div>
    <div>A amet consequatur cumque, deserunt doloremque dolorum fuga illo ipsam itaque iure iusto, labore modi molestiae
        nam nesciunt omnis possimus quas ratione recusandae rem repellendus sint tempora temporibus vero voluptas!
    </div>
    <div>Adipisci alias beatae culpa, est, ipsam laborum magni quasi rem rerum sint ut velit vero voluptas. Asperiores
        deleniti ea, eaque earum error minus molestiae nulla provident, quibusdam ratione soluta totam.
    </div>
    <div>Ab, aliquid consequatur consequuntur culpa deserunt, distinctio doloribus error fugiat fugit id illum ipsum
        iste libero magni modi nihil nobis nostrum nulla quas quisquam reprehenderit sapiente tempore voluptate
        voluptatem voluptatibus.
    </div>
    <div>Accusantium alias dolorum eum exercitationem magni minima natus voluptatem! Aliquid asperiores assumenda
        excepturi quam rerum? Amet aspernatur commodi doloremque, ducimus, earum itaque neque nesciunt non possimus quos
        repudiandae sequi tenetur?
    </div>
    <div>Cum eos pariatur quas quis sed temporibus voluptas. A aperiam consequuntur dolorem eligendi labore modi
        molestiae nam necessitatibus nulla placeat provident quae, quam quis saepe sunt tempora vero. Ratione, ut.
    </div>
    <div>Eum eveniet fugiat ipsam itaque perspiciatis quidem voluptate voluptatibus? Animi aperiam distinctio officia?
        Deserunt distinctio eligendi hic maxime veritatis! Doloremque dolores fugiat libero nemo, neque placeat saepe
        sequi unde vel!
    </div>
    <div>Error harum, sunt. Accusantium, alias, quasi? Dicta ducimus exercitationem fuga neque pariatur rem similique
        voluptatem. Accusamus corporis, cum delectus fugiat, nemo nulla numquam odio optio quidem quisquam,
        reprehenderit totam. Obcaecati?
    </div>
    <div>A aliquam at consequuntur debitis deserunt doloremque ducimus enim eos error id impedit ipsa ipsam itaque
        laboriosam minima molestiae nam nihil nostrum nulla numquam quibusdam quod quos, sequi ullam, unde.
    </div>
    <div>Dicta dignissimos eius error labore nostrum numquam quae quam rem rerum! Dolores nostrum placeat reprehenderit
        vero! Aspernatur at facere, minima quidem rem saepe similique. Eius officia quibusdam reprehenderit!
        Consectetur, in.
    </div>
    <div>Accusamus, consectetur sequi. Alias consequuntur culpa dolores harum magni nam vel. Accusamus aliquid
        consequatur culpa cum, dolorem et id in laudantium, minima mollitia omnis pariatur perferendis praesentium
        repellat tempora vero!
    </div>
    <div>Ab animi architecto assumenda aut dolor dolorem eius fuga fugit illo, labore molestiae natus nulla quaerat quia
        quisquam quos repellat repellendus rerum sequi voluptatum. Amet culpa dicta doloremque nemo odio?
    </div>
    <div>Aliquam architecto cupiditate eaque laudantium odit placeat repellat sint. Aspernatur corporis delectus eaque
        est id ipsa numquam ratione totam ullam voluptates? Doloremque labore laboriosam molestiae porro quasi rem
        suscipit? Provident!
    </div>
    <div>Accusantium atque consectetur cumque cupiditate debitis dolor earum fuga id in, incidunt itaque laborum magni
        maiores nostrum perferendis quas, repudiandae sapiente velit voluptatem voluptatibus? In ipsa modi placeat quo
        recusandae!
    </div>
    <div>Inventore, quaerat vero. Hic nostrum odit quisquam sapiente voluptate. At autem delectus distinctio eos error
        iste iure minus modi nostrum nulla numquam officia, porro quos reprehenderit temporibus tenetur ullam, veniam!
    </div>
    <div>Blanditiis fugit incidunt labore magnam quasi quisquam repellat. Cupiditate deserunt labore sed suscipit
        tempore. Blanditiis cupiditate ipsa labore maxime nulla optio quae sapiente vitae! Asperiores atque expedita
        odio porro quidem.
    </div>
    <div>Aut consectetur dolorem non voluptatem. Autem dolore eaque eveniet facere illo illum molestiae nam
        necessitatibus nesciunt nobis nostrum officiis pariatur perferendis quam quas quia, quis quo saepe tempora
        temporibus ullam.
    </div>
    <div>Debitis explicabo iure mollitia? Aliquid aperiam asperiores aspernatur cum cumque distinctio doloremque ea
        earum exercitationem id ipsa iusto laboriosam maxime modi molestias natus nesciunt quasi, quis reiciendis rem
        reprehenderit, veniam.
    </div>
    <div>Aperiam, dicta eius nesciunt nulla numquam officia officiis omnis pariatur, quae quibusdam quisquam reiciendis
        suscipit? Quam, recusandae sint. Alias blanditiis consectetur dicta iure mollitia placeat possimus reiciendis
        saepe sed totam.
    </div>
    <div>Ad autem consequuntur illum iste minima, nemo veniam vero! Aperiam at dolor dolore eius officiis placeat quam
        sit tempore, vitae voluptates. Distinctio earum facere illo, impedit in quasi ratione sequi.
    </div>
    <div>Culpa deleniti, doloribus est excepturi, facilis harum, illo ipsum laborum magni nihil odit pariatur quis quo
        sapiente similique sint voluptatem. Quaerat, recusandae velit. Consectetur earum, iste libero nulla quos
        veritatis?
    </div>
    <div>Architecto dolorum explicabo fuga hic impedit nihil odio quas qui recusandae. Doloremque eum excepturi
        explicabo, illo ipsum minima neque, nisi omnis quaerat ratione similique sunt tempore temporibus ut voluptatem
        voluptates?
    </div>
    <div>Accusantium architecto autem beatae blanditiis dolorum earum error, excepturi expedita iste, libero mollitia
        obcaecati placeat qui, quod sit sunt temporibus totam voluptas? Eum fugit molestiae numquam sequi tempore!
        Aliquam, non.
    </div>
    <div>Atque id nihil obcaecati qui sapiente similique, vitae voluptas! Aut consequatur consequuntur dolorem dolores
        eius nulla obcaecati quidem temporibus tenetur? Explicabo laudantium maiores minus nesciunt optio quasi
        quibusdam, quos recusandae?
    </div>
    <div>Accusamus asperiores deleniti dolore, eius hic in ipsum itaque nemo odio officiis omnis veritatis voluptas?
        Accusamus adipisci alias assumenda consequuntur et. Assumenda nemo, nulla! Beatae fugiat necessitatibus nobis
        veritatis voluptas.
    </div>
    <div>Adipisci alias aliquid aspernatur aut dicta dolore doloremque eius fugiat in labore quod repellendus ut veniam,
        vero voluptate. Consequatur cumque illum ipsa ipsum libero non perferendis recusandae reiciendis, rerum sequi.
    </div>
    <div>Ad adipisci aliquid amet aut beatae dicta dolore dolores eius, eligendi est excepturi id maiores, molestias
        mollitia natus necessitatibus numquam obcaecati perspiciatis quas quibusdam quidem recusandae temporibus
        voluptatum? Cum, repudiandae.
    </div>
    <div>Consectetur deserunt nulla officiis, placeat porro recusandae. Amet animi nesciunt, odit pariatur suscipit
        tempora voluptatem. Alias consequuntur delectus eos error maxime molestias omnis optio perspiciatis quod,
        recusandae, sint tempore temporibus.
    </div>
    <div>A aliquam architecto atque commodi cum cumque cupiditate deleniti dolorem dolores excepturi illo impedit
        laboriosam maiores minus necessitatibus, nihil omnis quae quaerat quisquam quod quos, reiciendis saepe sequi
        similique velit.
    </div>


</div>
</body>
</html>